<%@ page import="com.bean.User" %><%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/17
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="userDao" class="com.daoImpl.UserDAOImpl"></jsp:useBean>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%String username = (String) session.getAttribute("username");%>
<%
  String avatarUser = "";
  if (username != null){
    User userInfo = userDao.getUserInfo(username);
    avatarUser = userInfo.getAvatar();
  }
%>
<div id="top">
  <div class="container">
    <div class="row">

      <div class="col-lg-6 offer mb-3 mb-lg-0" style="margin-top: 25px">
        <a href="index.jsp" class="btn btn-success btn-sm">摆烂俱乐部</a>
        欢迎来到海洋环境保护宣传网站
      </div>
      <div class="col-lg-6 text-center text-lg-right">
        <!-- 判断用户是否登陆 -->
        <%if(username==null){%>
        <ul class="menu list-inline mb-0">
          <li class="list-inline-item">
            <a href="index.jsp" class="navbar-brand home" >
              <img src="img/logo-small.png" alt="摆烂俱乐部" class="d-none d-md-inline-block">
            </a>
            <a href="#" data-toggle="modal" data-target="#login-modal">登录</a>
          </li>
          <li class="list-inline-item"><a href="register.jsp">注册</a></li>
        </ul>
        <%}else{
        %>
        <ul class="menu list-inline mb-0">
          <li class="list-inline-item">
            <a href="user-account.jsp" class="navbar-brand home" >
              <img src="upload/img/<%=avatarUser%>" style="height: 60px;width: 60px" alt="摆烂俱乐部" class="d-none d-md-inline-block">
            </a>
          </li>
          <li class="list-inline-item"><a href="user-account.jsp"> 欢迎, <%= username %>!</a></li>
          <li class="list-inline-item"><a href="logout.jsp">退出登录</a></li>
        </ul>
        <%}%>
      </div>
    </div>
  </div>
  <div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" class="modal fade">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <!-- 登录 -->
          <h5 class="modal-title">用户登录</h5>
          <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">—</span></button>
        </div>
        <div class="modal-body">
          <form method = "post" action = "./user?action=login">
            <div class="form-group">
              <input name = "username" type="text" required placeholder="用户名" class="form-control">
            </div>
            <div class="form-group">
              <input name = "password" type="password" pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}" title="密码必须包含至少一个字母和一个数字，且长度不少于6位" required placeholder="密码" class="form-control">
            </div>
            <div class="form-group text-center">
              <input style="margin-bottom: 20px" type="text" class="form-control" required placeholder="验证码" name="captcha">
              <img alt="加载中……" src="check" id="img" border="1" onclick="reload()">
            </div>
            <p class="text-center">
              <button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-sign-in"></i>登录</button>
              <button type="reset" name="submit" class="btn btn-primary"><i class="fa fa-refresh"></i>重置</button>
            </p>
          </form>
          <p class="text-center text-muted">还没有注册?</p>
          <p class="text-center text-muted"><a href="register.jsp"><strong>立即注册</strong></a>!花费一分钟你将收获满满!</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  function reload() {
    const timestamp = new Date().getTime();  // 获取当前时间戳
    const img = document.getElementById('img');
    img.src = "check?t=" + timestamp;  // 在图片链接后添加时间戳参数
  }
</script>
</body>
</html>
